<template>
	<view class="container">
		<view class=" header p5">
			<u-search placeholder="请输入姓名/电话/地址关键字" :show-action="false"></u-search>
		</view>
		<view class="content">
			<view v-for="(item,index) in addressList" :key="index" class="address-wraper">
				<view class="flex">
					<view class="flex flex1 pb10">
						<view class="address-user">{{item.name}}</view>
						<view class="address-mobile">{{item.mobile}}</view>
						<view v-if="item.default" class="address-default">默认</view>
					</view>
					<view style="position: relative;">
						<view style="position: absolute;top:40%;right:10px;padding: 4px;"  @click="handleEdit(index,item)"><u-icon name="edit-pen" size="18"></u-icon></view>
					</view>
				</view>
				<view class="address-detail">
					{{item.address}}
				</view>
			</view>
		</view>
		<view class="footer">
			<u-button >新建地址</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				addressList: [{
					addrid:1,
					name: '刘晓晓',
					mobile: '18666666666',
					address: "北京市朝阳区东大桥28号",
					default: false,
					tag: ''
				}, {
					addrid:1,
					name: '刘大大',
					mobile: '18667766666',
					address: '山东省济南市历城区龙回1区12号楼西单元302',
					tag: '',
					default: false,
				},
				{
					addrid:1,
					name: '刘晓晓',
					mobile: '18666666666',
					address: "北京市朝阳区东大桥28号",
					default: false,
					tag: ''
				}, {
					addrid:1,
					name: '刘大大',
					mobile: '18667766666',
					address: '山东省济南市历城区龙回1区12号楼西单元302',
					tag: '',
					default: false,
				},
				{
					addrid:1,
					name: '刘晓晓',
					mobile: '18666666666',
					address: "北京市朝阳区东大桥28号",
					default: true,
					tag: ''
				}, {
					addrid:1,
					name: '刘大大',
					mobile: '18667766666',
					address: '山东省济南市历城区龙回1区12号楼西单元302',
					tag: '',
					default: false,
				}]
			}
		},
		methods: {
			handleEdit(index,data){
				uni.setStorageSync("address",{
					index:index,
					data:data
				})
				uni.navigateTo({
					url:"/pages/address/edit"
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #F8F8F8;
		height: 100vh; 
	}
	
	.container {
	  background-color: #F8F8F8;
	  display: flex;
	  flex-direction: column;
	  height: 100vh; 
	}
	 
	.header, .footer {
	  background-color: #fff;
	  padding: 5px;
	}
	 
	.content {
	  flex-grow: 1; /* 让内容区域自适应 */
	  overflow-y: auto; /* 如果内容过多，允许垂直滚动 */
	}

	.address-wraper {
		margin:6px;
		background-color: #fff;
		padding: 10px;
		border-radius:5px;
	}

	.address-user {
		font-size: 16px;
		font-weight: bold;
		margin-right: 8px;
	}

	.address-mobile {
		font-size: 16px;
		font-weight: bold;
	}

	.address-detail {
		color: #888;
		font-size: 14px;
	}
	
	.address-default{
		background-color: #ffedd8;
		padding: 2px 5px;
		color: #ff5500;
		border-radius: 8px;
		margin-left: 5px;
	}
</style>